import React from 'react';
import AntDatePicker from 'antd-mobile/lib/date-picker';
import List from 'antd-mobile/lib/list';
import styles from './PhoneRangePicker.less';

const RangePicker = (props) => {
  const { value, onChange, ...restProps } = props;
  const { format } = restProps;
  let mode = 'date';
  if (format === 'YYYY-MM-DD HH:mm:ss') {
    mode = 'datetime';
  }

  return (
    <div className={styles.datePicker}>
      <AntDatePicker
        {...restProps}
        mode={mode}
        value={value && value[0]}
        onChange={date => onChange([date, value && value[1]])}
      >
        <List.Item arrow="horizontal">开始时间</List.Item>
      </AntDatePicker>
      <AntDatePicker
        {...restProps}
        mode={mode}
        value={value && value[1]}
        onChange={date => onChange([value && value[0], date])}
      >
        <List.Item arrow="horizontal">结束时间</List.Item>
      </AntDatePicker>
    </div>
  );
}

export default RangePicker;
